    <!-- 批量导入 -->
<template>
  <glsx-dialog :show="value" title="批量导入线索" @close="closeDialog()">
    <div class="upload_box">
      <div class="cell" v-if="!isSuccess">
        <div class="name"><span class="cred">*</span>选择要导入的名单：</div>
        <div class="txt">
          <el-input v-model="uploadInfo.name" class="a_input" size="small" readonly></el-input>
          <el-upload class="el_upload" ref="upload" :headers="uploadHeader" :accept="fileAccept" :action="IMPORT_CLUE_INFO" :auto-upload="false" :show-file-list="false" :on-change="onFileChange" :on-success="onSuccess">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" :loading="loading" @click="submitUpload">上传</el-button>
          </el-upload>
        </div>
      </div>
      <div class="success_tips" v-if="isSuccess">
        <i class="el-icon-circle-check icon"></i>
        <span>成功导入</span>
        <span class="cred">{{uploadSuccessInfo.succNum}}</span>
        <span>位客户，失败</span>
        <span class="cred">{{uploadSuccessInfo.failNum}}</span>
        <span>位，</span>
        <a :href="BASEURL + uploadSuccessInfo.failFile" target="_blank" v-if="uploadSuccessInfo.failFile">点击下载失败名单</a>
      </div>
    </div>
  </glsx-dialog>
</template>
<script>
// import { BASEURL, SAVE_APPOINTMENTHANDLE_HIMPORT } from "@/http/finance";
import { BASEURL, IMPORT_CLUE_INFO } from "@/http/clues";
import { showToast } from "@/common/util";
export default {
  name: "BatchImport",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      uploadInfo: {},
      isSuccess: false,
      IMPORT_CLUE_INFO,
      fileAccept: ".xlsx,.xls",
      uploadHeader: {},
      uploadSuccessInfo: {},
      BASEURL: BASEURL,
      loading: false,
    };
  },
  created() {
    let token = sessionStorage.getItem("token");
    this.uploadHeader = { Authorization: token };
  },
  methods: {
    // 关闭弹框
    closeDialog() {
      this.$emit("input", false);
    },

    // 监听上传文件变化
    onFileChange(file) {
      console.log(file);
      this.uploadInfo = file;
    },

    // 文件上传
    submitUpload() {
      this.loading = true;
      this.$refs.upload.submit();
    },

    // 监听文件导入成功
    onSuccess(response, file, fileList) {
      this.loading = false;
      if (response.code == 200) {
        this.isSuccess = true;
        this.uploadSuccessInfo = response.data || {};
        this.$emit("change");
      } else {
        showToast({
          message: response.message,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.upload_box {
  padding: 20px 0 40px 0;

  .cell {
    display: flex;
    align-items: center;

    .name {
      .cred {
        color: #f00;
      }
    }

    .txt {
      display: flex;
      align-items: center;

      .a_input {
        margin-right: 10px;
      }

      .el_upload {
        display: flex;
        align-items: center;
      }
    }
  }

  .success_tips {
    display: flex;
    align-items: center;
    justify-content: center;

    .icon {
      font-size: 24px;
      color: #67c23a;
      margin-right: 10px;
    }

    a {
      color: #167fff;
    }
  }
}
</style>